<!--
 * @Descripttion:反结账右边布局卡片
-->
<template>
  <div>
    <div class="cancel-card-box">
      <!-- Loading 骨架屏 -->
      <div v-if="loading || !orderDetailData" class="skeleton-container">
        <el-skeleton :rows="10" animated />
      </div>

      <!-- 实际内容 -->
      <div v-else>
        <!-- 餐厅名字 -->
        <div class="title">{{ shopName }}</div>
        <div class="description">【反结账账单】</div>
        <!-- 桌台 -->
        <div class="desc-item desc-item-box">
          <div>桌台：{{ computedDeskName }}</div>
          <span>{{ clerkName }}</span>
        </div>
        <!-- 单号 -->
        <div class="desc-item desc-item-box">
          <div>单号：{{ ticketNumber }}</div>
          <span></span>
        </div>
        <!-- 结束时间 -->
        <div class="desc-item desc-item-box">
          <div>结束时间：{{ endTime }}</div>
          <span></span>
        </div>
        <!-- 反结前 -->
        <div class="cancel-text">反结前</div>
        <!-- 表头 -->
        <div class="desc-item">
          <p>菜品</p>
          <p>数量</p>
          <p>总金额</p>
        </div>
        <div class="desc-line"></div>
        <!-- 菜品 -->
        <div class="good-list-box" v-for="(food, index) in beforeFoodList" :key="`before-${index}`">
          <div class="good-item">
            <p>{{ food.name }}</p>
            <p>{{ food.num }}</p>
            <p>{{ food.total_money }}</p>
          </div>
          <div class="good-sku-item" v-if="food.group_info?.length">
            <div class="good-item" v-for="(sku, index) in food.group_info" :key="index">
              <p>{{ sku.name }}</p>
              <p>{{ sku.num }} {{ sku.unit }}</p>
              <p></p>
            </div>
          </div>
          <div class="good-sku-item" v-if="dealFoodSkuDescFun(food)">
            ({{ dealFoodSkuDescFun(food) }})
          </div>
        </div>
        <div class="desc-line"></div>
        <!-- 应收 -->
        <div class="desc-item">
          <p>应收</p>
          <p></p>
          <p v-if="beforePayInfo">{{ beforePayInfo.money }}</p>
          <p v-else>0</p>
        </div>
        <div class="desc-line"></div>
        <!-- 实收  -->
        <div class="desc-item">
          <p>实收：</p>
          <p></p>
          <p v-if="beforepayList.length > 1">混合支付 {{ beforePayInfo.money }}元</p>
          <p v-else>
            {{ beforepayList.length && beforepayList[0].name }} {{ beforePayInfo.money }}元
          </p>
        </div>
        <template v-if="beforepayList.length > 1">
          <div class="desc-item" v-for="item in beforePayInfo" :key="item.pay_method">
            <p>{{ item.name }}</p>
            <p></p>
            <p>{{ item.money }}</p>
          </div>
        </template>
        <template v-if="afterFoodList.length">
          <!-- 反结后 -->
          <div class="cancel-text">反结后</div>
          <!-- 表头 -->
          <div class="desc-item">
            <p>菜品</p>
            <p>数量</p>
            <p>总金额</p>
          </div>
          <div class="desc-line"></div>
          <!-- 菜品 -->
          <div class="good-list-box" v-for="(food, index) in afterFoodList" :key="`after-${index}`">
            <div class="good-item">
              <p>{{ food.name }}</p>
              <p>{{ food.num }}</p>
              <p>{{ food.total_money }}</p>
            </div>
            <div class="good-sku-item" v-if="food.group_info?.length">
              <div class="good-item" v-for="(sku, index) in food.group_info" :key="index">
                <p>{{ sku.name }}</p>
                <p>{{ sku.num }} {{ sku.unit }}</p>
                <p></p>
              </div>
            </div>

            <div class="good-sku-item" v-if="dealFoodSkuDescFun(food)">
              ({{ dealFoodSkuDescFun(food) }})
            </div>
          </div>
          <div class="desc-line"></div>
          <!-- 应收 -->
          <div class="desc-item">
            <p>应收</p>
            <p></p>
            <p v-if="afterPayInfo">{{ afterPayInfo.money }}</p>
            <p v-else>0</p>
          </div>
          <div class="desc-line"></div>
          <!-- 实收  -->
          <div class="desc-item">
            <p>实收：</p>
            <p></p>
            <p v-if="afterpayList.length > 1">混合支付 {{ afterPayInfo.money }}元</p>
            <p v-else>
              {{ afterpayList.length && afterpayList[0].name }} {{ afterPayInfo.money }}元
            </p>
          </div>
          <template v-if="afterpayList.length > 1">
            <div class="desc-item" v-for="item in afterpayList" :key="item.pay_method">
              <p>{{ item.name }}</p>
              <p></p>
              <p>{{ item.money }}</p>
            </div>
          </template>
        </template>
        <!-- 餐厅地址 -->
        <div class="address-phone-box">
          <div>餐厅地址：{{ shopAddress }}</div>
          <div>餐厅电话：{{ shopPhone }}</div>
          <div>技术支持：贵州一粒米科技餐饮软件服务有限公司</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { fetchTicketDetail } from '@/api/user'
import { dealAssignDataFunction } from '@/utils/toolsValidate'
import { ElMessage } from 'element-plus'
import type { FoodItem } from '@/types/bill'

interface Props {
  selectedOrderId?: string
}

const props = withDefaults(defineProps<Props>(), {
  selectedOrderId: ''
})

const emit = defineEmits(['onCancel'])

// 订单详情回显数据
const orderDetailData = ref<any>(null)
// 添加 loading 状态
const loading = ref(false)

// 支付方式枚举
const payMethodEunm = {
  balance: '余额',
  cash: '现金',
  on_account1: '企业挂账',
  on_account2: '个人挂账',
  integripay: '积分支付'
}

// 处理多个桌台回显
const computedDeskName = computed(() => {
  let deskNameList = []
  if (orderDetailData.value?.detail?.deskList?.length) {
    deskNameList = orderDetailData.value.detail.deskList.map((desk: any) => {
      return `${desk.name}(${desk.use_num})`
    })
    return deskNameList.join('、')
  }
  if (orderDetailData.value?.detail?.desk_name) {
    return orderDetailData.value.detail.desk_name
  }
  return ''
})

// 处理回显菜品的规格信息（做法+口味+部位）
const dealFoodSkuDescFun = (item: any) => {
  if (item?.notes?.length) {
    return item.notes.join('、')
  } else {
    return false
  }
}

// 餐厅名称
const shopName = computed(() => {
  return dealAssignDataFunction('', orderDetailData.value?.detail?.shopInfo?.shop_name)
})

// 餐厅电话
const shopPhone = computed(() => {
  return dealAssignDataFunction('', orderDetailData.value?.detail?.shopInfo?.phone)
})

// 餐厅地址
const shopAddress = computed(() => {
  return dealAssignDataFunction('', orderDetailData.value?.detail?.shopInfo?.address)
})

// 收银员
const clerkName = computed(() => {
  return dealAssignDataFunction('', orderDetailData.value?.detail?.clerkName)
})

// 结束时间
const endTime = computed(() => {
  return dealAssignDataFunction('', orderDetailData.value?.create_time)
})

// 应收
const originMoney = computed(() => {
  return dealAssignDataFunction(0, orderDetailData.value?.detail?.priceInfo?.originMoney)
})

// 实收
const payMoney = computed(() => {
  return dealAssignDataFunction(0, orderDetailData.value?.detail?.priceInfo?.payMoney)
})

// 菜品列表：反结前
const beforeFoodList = computed(() => {
  return dealAssignDataFunction([], orderDetailData.value?.detail?.before?.foodList)
})

// 支付列表：反结前
const beforepayList = computed(() => {
  return dealAssignDataFunction([], orderDetailData.value?.detail?.before?.payList)
})

// 菜品列表：反结后
const afterFoodList = computed(() => {
  return dealAssignDataFunction([], orderDetailData.value?.detail?.after?.foodList)
})

// 支付信息：反结前
const beforePayInfo = computed(() => {
  return dealAssignDataFunction(null, orderDetailData.value?.detail?.before?.payInfo)
})

// 支付信息：反结后
const afterPayInfo = computed(() => {
  return dealAssignDataFunction(0, orderDetailData.value?.detail?.after?.payInfo)
})

// 支付列表：反结后
const afterpayList = computed(() => {
  return dealAssignDataFunction([], orderDetailData.value?.detail?.after?.payList)
})

// 单号
const ticketNumber = computed(() => {
  return dealAssignDataFunction('', orderDetailData.value?.order_id)
})

// 获取小票数据
const getTicketDetail = async (id: string) => {
  const datas = {
    order_id: id,
    type: 'FJ'
  }
  loading.value = true
  try {
    const res = await fetchTicketDetail(datas)
    console.log('res反结账==========', res)
    if (res.status == 200) {
      orderDetailData.value = dealAssignDataFunction(null, res?.data?.detail)
      if (!orderDetailData.value) {
        ElMessage.error('没有找到小票数据')
        emit('onCancel')
      }
    } else {
      ElMessage.error('没有找到小票数据')
      emit('onCancel')
    }
  } catch (error) {
    console.error('获取小票数据失败:', error)
    ElMessage.error('获取小票数据失败')
    emit('onCancel')
  } finally {
    loading.value = false
  }
}

// 监听选中的订单ID变化
watch(
  () => props.selectedOrderId,
  newVal => {
    if (newVal) {
      getTicketDetail(newVal)
    } else {
      orderDetailData.value = null
      loading.value = false
    }
  }
)
</script>

<style lang="scss" scoped>
// 骨架屏容器样式
.skeleton-container {
  width: 100%;
  height: 80%;
  padding: 20px 0;

  :deep(.el-skeleton) {
    .el-skeleton__item {
      background: #f5f5f5;
      border-radius: 4px;
    }

    .el-skeleton__text {
      height: 16px;
      margin-top: 8px;
    }
  }
}
.cancel-card-box {
  overflow-y: auto;
  overflow-x: hidden;
  width: 420px;
  height: 986px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 3px 0px 24px 0px rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
  padding: 30px;
  transition: all 1s !important;

  .title {
    font-size: 20px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #333333;
  }
  .description {
    font-size: 16px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #333333;
    margin: 10px 0;
  }
  .cancel-text {
    font-size: 16px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #333333;
    margin-top: 20px;
    margin-right: 10px;
  }
  .desc-item {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 14px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    color: #333333;
    text-align: center;
    > p {
      &:first-child {
        text-align: left;
      }
      &:last-child {
        text-align: right;
      }
    }
  }
  .good-list-box {
    margin-top: 10px;
    .good-item {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      font-family:
        PingFang SC,
        PingFang SC-Bold;
      font-weight: 700;
      color: #000000;
      text-align: center;
      > p {
        &:first-child {
          text-align: left;
        }
        &:last-child {
          text-align: right;
        }
      }
    }
    .good-sku-item {
      margin-top: 10px;
      font-size: 14px;
      font-family:
        PingFang SC,
        PingFang SC-Bold;
      font-weight: 700;
      color: #000000;
      line-height: 18px;
    }
  }
  .desc-line {
    width: 360px;
    height: 1px;
    background: #e2e2e2;
    margin-top: 10px;
  }
  .desc-title {
    font-size: 16px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #333333;
    margin: 20px 0 10px 0;
  }
  .address-phone-box {
    margin-top: 50px;
    font-size: 14px;
    font-family:
      PingFang SC,
      PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #333333;
    line-height: 24px;
    > div {
      margin-bottom: 10px;
    }
  }
}
.desc-item-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
</style>
